<script setup lang="ts">
let gap = ref<string>('1rem')
</script>

<template>
<div class="wrap">
  <div class="form">
    <label for="gap">gap:</label>
    <select v-model="gap" name="gap" id="gap">
      <option value="1rem">1rem</option>
      <option value="2em">2em</option>
      <option value="30px">30px</option>
      <option value="5vw">5vw</option>
      <option value="5vh">5vh</option>
      <option value="5vmin">5vmin</option>
      <option value="5vmax">5vmax</option>
      <option value="5ex">5ex</option>
      <option value="5ch">5ch</option>
      <option value="5%">5%</option>
    </select>
  </div>
  <div class="container">
    <div class="item">Flex Item 1</div>
    <div class="item">Flex Item 2</div>
    <div class="item">Flex Item 3</div>
    <div class="item">Flex Item 4</div>
    <div class="item">Flex Item 5</div>
  </div>

  <div class="container" dir="rtl">
    <div class="item">1عنصر فليكس</div>
    <div class="item">2عنصر فليكس</div>
    <div class="item">3عنصر فليكس</div>
    <div class="item">4عنصر فليكس</div>
    <div class="item">5عنصر فليكس</div>
  </div>
</div>
</template>

<style scoped lang="scss">
  .wrap  {
    --gap: v-bind(gap);
    --columns: 5;


    width: 100vw;
    min-height: 100vh;
    font-family: "Exo", Arial, sans-serif;
    background-color: #557;
    color: #fff;
    display: grid;
    grid-template-rows: min-content auto auto;
    gap: 1rem;
    padding: 1rem;
    align-items: start;
    align-content: start;
    justify-content: center;

    .form {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;

      label {
        white-space: nowrap;
        text-align: right;
      }

      select {
        padding: 0.25em 0.5em;
        font-size: inherit;
        min-width: 160px;
      }
    }

    .container {
      inline-size: 80vw;
      background: #ffffff;
      border: 3px solid #88978a;
      border-radius: 7px;
      display: flex;
      flex-wrap: wrap;
      gap: var(--gap);
      .item {
        background: #e8f0fe;
        border: 2px solid #2938e9;
        border-radius: 4px;
        color: #000;
        padding: 1rem;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        inline-size: 150px;
        aspect-ratio: 1;
        flex-basis: calc((100% - (var(--columns) - 1) * var(--gap)) / var(--columns));

        &:nth-child(2) {
          background-color: #efe1ff;
        }
        &:nth-child(3) {
          background-color: #bbd7af;
        }
        &:nth-child(4) {
          background-color: #ecbbbb;
        }
        &:nth-child(5) {
          background-color: #00f0ff;
        }
        &:nth-child(6) {
          background-color: #d7af0a;
        }
      }
    }
  }
</style>
